<template>
	<view class="submit_com">
		<view class="from_list_box w100 h100">
			<view class="from_list flex">
				<view class="left_txt s26 family f500">
					投诉人
				</view>
				<input class="uni-input s26 family f500" placeholder="必填" v-model="user.nickname" disabled="true" />
			</view>
			<view class="from_list flex">
				<view class="left_txt s26 family f500">
					联系电话
				</view>
				<input class="uni-input s26 family f500" maxlength="11" v-model="phone" placeholder="必填" />
			</view>
			<view class="from_list flex" @click="xzStore">
				<view class="left_txt s26 family f500">
					投诉店家
				</view>
				<view class="store_name s26 f500 family">
					{{storeName == '' ? '请选择店铺' : storeName}}
				</view>
				<image class="jiantou_box" src="../static/right_hui_jian.png" mode=""></image>
			</view>
			<view class="from_list_two">
				<view class="left_txt_two s26 family f500">
					投诉原因
				</view>
				<view class="uni-textarea">
					<textarea class="s26 f500 family" v-model="txyy" style="color: #999999;" placeholder="点击填写" />
				</view>
			</view>
			<view class="from_list_two">
				<view class="left_txt_three s26 family f500">
					投诉凭证(选填)
				</view>
				<view class="flex" style="flex-wrap: wrap;">
					<view class="xianji_img_two" v-for="(item,index) in images" :key="index">
						<image class="w100 h100" :src="item" mode=""></image>
					</view>
					<view class="up_img_box" @click="upImg">
						<view class="xianji_img">
							<image class="w100 h100" src="../static/xiangji.png" mode=""></image>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="submit_btn s32 familytow fblod txtali" @click="submit">
			提交
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				user: {},
				phone: '',
				storeId: '',
				storeName: '',
				txyy: '',
				images: []
			}
		},
		onLoad() {
			// 获取用户名称
			this.user = uni.getStorageSync('userInfo')
		},
		methods: {
			// 提交举报信息
			submit() {
				let that = this
				that.$request({
					url: 'complaint/add',
					method: 'POST',
					data: {
						complaint_shop_id: that.storeId,
						type: 2,
						content: that.txyy,
						mobile: that.phone,
						images: that.images
					}
				}).then(res => {
					if(res.statusCode == 200) {
						uni.showToast({
							title: '提交成功',
							icon: 'none',
							duration: 2000,
						})
						setTimeout(() => {
							uni.navigateBack({})
						},2001)
					} else {
						uni.showToast({
							title: '提交失败请重新提交！',
							icon: 'none',
							duration: 2000,
						})
					}
				})
			},
			// 上传图片
			upImg() {
				this.$upLoadImage().then(res => {
					this.images.push(res.fullurl)
				}).catch(error => {
					return false
				})
			},
			xzStore() {
				uni.navigateTo({
					url: './storeList'
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.submit_com {
		overflow: hidden;

		.from_list_box {
			margin-top: 72upx;

			.from_list {
				width: 750upx;
				height: 112upx;
				border-bottom: 2upx solid #F1F1F1;

				.left_txt {
					width: 104upx;
					height: 36upx;
					margin-left: 32upx;
					line-height: 112upx;
					color: #000000;
				}

				.uni-input {
					margin-top: 30upx;
					margin-left: 28upx;
				}

				.store_name {
					width: 312upx;
					color: #666666;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					line-height: 112upx;
					margin-left: 228upx;
					text-align: right;
				}

				.jiantou_box {
					width: 9upx;
					height: 18upx;
					margin-top: 46rpx;
					margin-left: 32rpx;
					display: inline-block;
				}
			}

			.from_list_two {
				border-bottom: 2upx solid #F1F1F1;

				.left_txt_two {
					width: 104upx;
					height: 36upx;
					margin-left: 32upx;
					margin-top: 38upx;
					color: #000000;
				}

				.left_txt_three {
					height: 36upx;
					margin-left: 32upx;
					margin-top: 38upx;
					color: #000000;
				}

				.up_img_box {
					width: 224upx;
					height: 224upx;
					background: #F1F1F1;
					border-radius: 20upx 20upx 20upx 20upx;
					margin-top: 40upx;
					margin-left: 32upx;
					overflow: hidden;

					.xianji_img {
						width: 75upx;
						height: 70upx;
						margin: 76upx auto;
					}
				}
				.xianji_img_two {
					width: 224upx;
					height: 224upx;
					background: #F1F1F1;
					border-radius: 20upx 20upx 20upx 20upx;
					margin-top: 40upx;
					margin-left: 26upx;
					overflow: hidden;
				}
				.uni-textarea {
					margin-top: 30upx;
					margin-left: 32upx;
				}
			}
		}

		.submit_btn {
			width: 622upx;
			height: 100upx;
			background: #EBBE87;
			border-radius: 50upx 50upx 50upx 50upx;
			margin: 64upx auto;
			color: #FFFFFF;
			line-height: 100upx;
		}
	}
</style>
